/* Add additional stylesheets below
-------------------------------------------------- */
/*
  Bootstrap's documentation styles
  Special styles for presenting Bootstrap's documentation and examples
*/


/* Body and structure
-------------------------------------------------- */
body { position:relative; padding-top:60px; background-color:#fff; background-image:url("../img/perforated_bg.PNG"); background-repeat:repeat; background-position:0 40px; }


/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
.navbar-fixed-top .brand { padding-right:0; padding-left:0; margin-left:20px; float:right; font-weight:bold; color:#666;
 text-shadow:0 2px 0 rgba(0,0,0,1), 0 0 30px rgba(0,0,0,1); -webkit-transition:all .2s linear; -moz-transition:all .2s linear; transition:all .2s linear; }
.navbar-fixed-top .brand:hover { text-decoration:none; }


/* Space out sub-sections more
-------------------------------------------------- */
section { padding-top:60px; }

/* Faded out hr */
hr.soften { height:1px; margin:54px 0; background-image:-webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image:   -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image:    -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image:     -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); border:0; }


/* Jumbotrons
-------------------------------------------------- */
.jumbotron { position:relative; }
.jumbotron h1 { margin-bottom:9px; font-size:81px; font-weight:bold; letter-spacing:-1px; line-height:1; }
.jumbotron p { margin-bottom:18px; font-weight:300; }
.jumbotron .btn-large { font-size:20px; font-weight:normal; padding:14px 24px; margin-right:10px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }
.jumbotron .btn-large small { font-size:14px; }

/* Masthead (docs home) */
.masthead { padding-top:36px; margin-bottom:72px; }
.masthead h1,
.masthead p { text-align:center; }
.masthead h1 { margin-bottom:18px; }
.masthead p { margin-left:5%; margin-right:5%; font-size:30px; line-height:36px; }


/* Specific jumbotrons
------------------------- */
/* supporting docs pages */
.subhead { padding-bottom:0; margin-bottom:9px; }
.subhead h1 { font-size:54px; }

/* Subnav */
.subnav { width:100%; height:36px; background-color:#eeeeee; /* Old browsers */
  background-repeat:repeat-x; /* Repeat the gradient */
  background-image:-moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
  background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
  background-image:-webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
  background-image:-ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
  background-image:-o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
  background-image:linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
  border:1px solid #e5e5e5; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
.subnav .nav { margin-bottom:0; }
.subnav .nav > li > a { margin:0; padding-top:   11px; padding-bottom:11px; border-left:1px solid #f5f5f5; border-right:1px solid #e5e5e5; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; }
.subnav .nav > .active > a,
.subnav .nav > .active > a:hover { padding-left:13px; color:#777; background-color:#e9e9e9; border-right-color:#ddd; border-left:0; -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.05); -moz-box-shadow:inset 0 3px 5px rgba(0,0,0,.05); box-shadow:inset 0 3px 5px rgba(0,0,0,.05); }
.subnav .nav > .active > a .caret,
.subnav .nav > .active > a:hover .caret { border-top-color:#777; }
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover { border-left:0; padding-left:12px; -webkit-border-radius:4px 0 0 4px; -moz-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px; }
.subnav .nav > li:last-child > a { border-right:0; }
.subnav .dropdown-menu { -webkit-border-radius:0 0 4px 4px; -moz-border-radius:0 0 4px 4px; border-radius:0 0 4px 4px; }

/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
@media (min-width:980px) { .subnav-fixed {   position:fixed;   top:40px;   left:0;   right:0;   z-index:1020; /* 10 less than .navbar-fixed to prevent any overlap */
    border-color:#d5d5d5;   border-width:0 0 1px; /* drop the border on the fixed edges */
    -webkit-border-radius:0;   -moz-border-radius:0;   border-radius:0;   -webkit-box-shadow:inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);   -moz-box-shadow:inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);   box-shadow:inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);   filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
  }
  .subnav-fixed .nav {   width:938px;   margin:0 auto;   padding:0 1px; }
  .subnav .nav > li:first-child > a,
  .subnav .nav > li:first-child > a:hover {   -webkit-border-radius:0;   -moz-border-radius:0;   border-radius:0; }
}


/* Quick links
-------------------------------------------------- */
.bs-links { margin:36px 0; }
.quick-links { min-height:30px; margin:0; padding:5px 20px; list-style:none; text-align:center; overflow:hidden; }
.quick-links:first-child { min-height:0; }
.quick-links li { display:inline; margin:0 5px; color:#999; }
.quick-links .github-btn,
.quick-links .tweet-btn,
.quick-links .follow-btn { position:relative; top:5px; }


/* Marketing section of Overview
-------------------------------------------------- */
.marketing .row { margin-bottom:9px; }
.marketing h1 { margin:36px 0 27px; font-size:40px; font-weight:300; text-align:center; }
.marketing h2,
.marketing h3 { font-weight:300; }
.marketing h2 { font-size:22px; }
.marketing p { margin-right:10px; }
.marketing .bs-icon { float:left; margin:7px 10px 0 0; opacity:.8; }
.marketing .small-bs-icon { float:left; margin:4px 5px 0 0; }


/* Footer
-------------------------------------------------- */
.footer { margin-top:45px; padding:35px 0 36px; border-top:3px solid #e5e5e5; }
.footer p { margin-bottom:0; color:#555; }


/* Special grid styles
-------------------------------------------------- */
.show-grid { margin-top:10px; margin-bottom:20px; }
.show-grid [class*="span"] { background-color:#eee; text-align:center; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; min-height:30px; line-height:30px; }
.show-grid:hover [class*="span"] { background:#ddd; }
.show-grid .show-grid { margin-top:0; margin-bottom:0; }
.show-grid .show-grid [class*="span"] { background-color:#ccc; }


/* Render mini layout previews
-------------------------------------------------- */
.mini-layout { border:1px solid #ddd; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.075); -moz-box-shadow:0 1px 2px rgba(0,0,0,.075); box-shadow:0 1px 2px rgba(0,0,0,.075); }
.mini-layout { height:240px; margin-bottom:20px; padding:9px; }
.mini-layout div { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
.mini-layout .mini-layout-body { background-color:#dceaf4; margin:0 auto; width:70%; height:240px; }
.mini-layout.fluid .mini-layout-sidebar,
.mini-layout.fluid .mini-layout-header,
.mini-layout.fluid .mini-layout-body { float:left; }
.mini-layout.fluid .mini-layout-sidebar { background-color:#bbd8e9; width:20%; height:240px; }
.mini-layout.fluid .mini-layout-body { width:77.5%; margin-left:2.5%; }


/* Popover docs
-------------------------------------------------- */
.popover-well { min-height:160px; }
.popover-well .popover { display:block; }
.popover-well .popover-wrapper { width:50%; height:160px; float:left; margin-left:55px; position:relative; }
.popover-well .popover-menu-wrapper { height:80px; }
.large-bird { margin:5px 0 0 310px; opacity:.1; }


/* Download page
-------------------------------------------------- */
.download .page-header { margin-top:36px; }
.page-header .toggle-all { margin-top:5px; }

/* Space out h3s when following a section */
.download h3 { margin-bottom:5px; }
.download-builder input + h3,
.download-builder .checkbox + h3 { margin-top:9px; }

/* Fields for variables */
.download-builder input[type=text] { margin-bottom:9px; font-family:Menlo, Monaco, "Courier New", monospace; font-size:12px; color:#d14; }
.download-builder input[type=text]:focus { background-color:#fff; }

/* Custom, larger checkbox labels */
.download .checkbox { padding:6px 10px 6px 25px; color:#555; background-color:#f9f9f9; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; }
.download .checkbox:hover { color:#333; background-color:#f5f5f5; }
.download .checkbox small { font-size:12px; color:#777; }

/* Variables section */
#variables label { margin-bottom:0; }

/* Giant download button */
.download-btn { margin:36px 0 108px; }
#download p,
#download h4 { max-width:50%; margin:0 auto; color:#999; text-align:center; }
#download h4 { margin-bottom:0; }
#download p { margin-bottom:18px; }
.download-btn .btn { display:block; width:auto; padding:19px 24px; margin-bottom:27px; font-size:30px; line-height:1; text-align:center; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }


/* Color swatches on LESS docs page
-------------------------------------------------- */
/* Sets the width of the td */
.swatch-col { width:30px; }
/* Le swatch */
.swatch { display:inline-block; width:30px; height:20px; margin:-6px 0; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
/* For white swatches, give a border */
.swatch-bordered { width:28px; height:18px; border:1px solid #eee; }


/* Misc
-------------------------------------------------- */

img { max-width:100%; }

/* Make tables spaced out a bit more */
h2 + table,
h3 + table,
h4 + table,
h2 + .row { margin-top:5px; }

/* Example sites showcase */
.example-sites img { max-width:100%; margin:0 auto; }
.marketing-byline { margin:-18px 0 27px; font-size:18px; font-weight:300; line-height:24px; color:#999; text-align:center; }

.scrollspy-example { height:200px; overflow:auto; position:relative; }

/* Remove bottom margin on example forms in wells */
form.well { padding:14px; }

/* Tighten up spacing */
.well hr { margin:18px 0; }

/* Fake the :focus state to demo it */
.focused { border-color:rgba(82,168,236,.8); -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); box-shadow:inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); outline:0; }

/* For input sizes, make them display block */
.docs-input-sizes select,
.docs-input-sizes input[type=text] { display:block; margin-bottom:9px; }

/* Icons
------------------------- */
.the-icons { margin-left:0; list-style:none; }
.the-icons i:hover { background-color:rgba(255,0,0,.25); }

/* Eaxmples page
------------------------- */
.bootstrap-examples .thumbnail { margin-bottom:9px; background-color:#fff; }

/* Responsive table
------------------------- */
.responsive-utilities th small { display:block; font-weight:normal; color:#999; }
.responsive-utilities tbody th { font-weight:normal; }
.responsive-utilities td { text-align:center; }
.responsive-utilities td.is-visible { color:#468847; background-color:#dff0d8 !important; }
.responsive-utilities td.is-hidden { color:#ccc; background-color:#f9f9f9 !important; }

/* Responsive tests
------------------------- */
.responsive-utilities-test { margin-top:5px; margin-left:0; list-style:none; overflow:hidden; /* clear floats */
}
.responsive-utilities-test li { position:relative; float:left; width:25%; height:43px; font-size:14px; font-weight:bold; line-height:43px; color:#999; text-align:center; border:1px solid #ddd; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
.responsive-utilities-test li + li { margin-left:10px; }
.responsive-utilities-test span { position:absolute; top:   -1px; left:  -1px; right: -1px; bottom:-1px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
.responsive-utilities-test span { color:#468847; background-color:#dff0d8; border:1px solid #d6e9c6; }


/* Responsive Docs
-------------------------------------------------- */
@media (max-width:480px) {

  /* Reduce padding above jumbotron */
  body {   padding-top:70px; }

  /* Change up some type stuff */
  h2 {   margin-top:27px; }
  h2 small {   display:block;   line-height:18px; }
  h3 {   margin-top:18px; }

  /* Adjust the jumbotron */
  .jumbotron h1,
  .jumbotron p {   text-align:center;   margin-right:0; }
  .jumbotron h1 {   font-size:45px;   margin-right:0; }
  .jumbotron p {   margin-right:0;   margin-left:0;   font-size:18px;   line-height:24px; }
  .jumbotron .btn {   display:block;   font-size:18px;   padding:10px 14px;   margin:0 auto 10px; }
  /* Masthead (home page jumbotron) */
  .masthead {   padding-top:0; }

  /* Don't space out quick links so much */
  .quick-links {   margin:40px 0 0; }
  /* hide the bullets on mobile since our horizontal space is limited */
  .quick-links .divider {   display:none; }

  /* center example sites */
  .example-sites {   margin-left:0; }
  .example-sites > li {   float:none;   display:block;   max-width:280px;   margin:0 auto 18px;   text-align:center; }
  .example-sites .thumbnail > img {   max-width:270px; }

  table code {   white-space:normal;   word-wrap:break-word;   word-break:break-all; }

  /* Modal example */
  .modal-example .modal {   position:relative;   top:auto;   right:auto;   bottom:auto;   left:auto; }

}


@media (max-width:768px) {

  /* Remove any padding from the body */
  body {   padding-top:0; }

  /* Jumbotron buttons */
  .jumbotron .btn {   margin-bottom:10px; }

  /* Subnav */
  .subnav {   position:static;   top:auto;   z-index:auto;   width:auto;   height:auto;   background:#fff; /* whole background property since we use a background-image for gradient */
    -webkit-box-shadow:none;   -moz-box-shadow:none;   box-shadow:none; }
  .subnav .nav > li {   float:none; }
  .subnav .nav > li > a {   border:0; }
  .subnav .nav > li + li > a {   border-top:1px solid #e5e5e5; }
  .subnav .nav > li:first-child > a,
  .subnav .nav > li:first-child > a:hover {     -webkit-border-radius:4px 4px 0 0;     -moz-border-radius:4px 4px 0 0;  border-radius:4px 4px 0 0; }

  /* Popovers */
  .large-bird {   display:none; }
  .popover-well .popover-wrapper {   margin-left:0; }

  /* Space out the show-grid examples */
  .show-grid [class*="span"] {   margin-bottom:5px; }

  /* Unfloat the back to top link in footer */
  .footer .pull-right {   float:none; }
  .footer p {   margin-bottom:9px; }

}


@media (min-width:480px) and (max-width:768px) {

  /* Scale down the jumbotron content */
  .jumbotron h1 {   font-size:54px; }
  .jumbotron p {   margin-right:0;   margin-left:0; }

}


@media (min-width:768px) and (max-width:980px) {

  /* Remove any padding from the body */
  body {   padding-top:0; }

  /* Scale down the jumbotron content */
  .jumbotron h1 {   font-size:72px; }

}


@media (max-width:980px) {

  /* Unfloat brand */
  .navbar-fixed-top .brand {   float:left;   margin-left:0;   padding-left:10px;   padding-right:10px; }

  /* Inline-block quick links for more spacing */
  .quick-links li {   display:inline-block;   margin:5px; }

}


/* LARGE DESKTOP SCREENS */
@media (min-width:1210px) {

  /* Update subnav container */
  .subnav-fixed .nav {   width:1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
  }

}
